<template>
  <div class="layout-file">
    <vue-office-docx
      v-if="fileType?.includes('doc')"
      :src="fileUrl"
      style="width: 100%; height: 100%"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <!-- <vue-office-excel
      v-else-if="fileType?.includes('application/vnd.ms-excel') || fileType?.includes('xlsx')"
      :src="fileUrl"
      :options="options"
      style="width: 100%; height: 100%"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <vue-office-pptx
      v-else
      :src="fileUrl"
      style="width: 100%; height: 100%"
      @rendered="renderedHandler"
      @error="errorHandler"
    /> -->
  </div>
</template>

<script lang="ts" setup>
import VueOfficeDocx from '@vue-office/docx'
// import VueOfficePptx from '@vue-office/pptx'
// import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
const route = useRoute()
const fileUrl = route?.query?.fileUrl
const fileType = route?.query?.fileType
console.log(fileUrl)
console.log(fileType)
const renderedHandler = () => {
  loading.value = false
  console.log('渲染完成')
}
const errorHandler = () => {
  loading.value = false
  console.log('渲染失败')
}
// const options = {
//   xls: fileType === 'application/vnd.ms-excel' ? true : false,
//   minColLength: 0,
//   minRowLength: 0,
//   widthOffset: 10,
//   heightOffset: 10,
//   beforeTransformData: (workbookData) => {
//     return workbookData
//   },
//   transformData: (workbookData) => {
//     return workbookData
//   }
// }

const loading = ref(false)
    
</script>

<style lang="scss" scoped>
.layout-file {
  width: calc(100% - 1rem);
  height: 100%;
  float: left;
  margin-top: 0.8rem;
  margin-right: 0.8rem;
  position: relative;
  // border: 1px solid #f00;
  // border-radius: 0.3rem;
  &:nth-child(1), &:nth-child(2) {
    margin-top: 0;
  }
}
</style>
